import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'package:scrawl/third_part/bloc/bloc.dart';

import '../bloc/edit_scrawl_bloc.dart';
import '../bloc/scrawl_draw_controller.dart';
import 'scrawl_painter.dart';

class ScrawlPreviewWidget extends StatefulWidget with PreferredSizeWidget {
  final ScrawlDrawController controller;
  ScrawlPreviewWidget({Key key, this.controller}) : super(key: key);

  final double preiviewSize = 90;

  @override
  _ScrawlPreviewWidgetState createState() => _ScrawlPreviewWidgetState();

  @override
  Size get preferredSize => Size(preiviewSize, preiviewSize);
}

class _ScrawlPreviewWidgetState extends State<ScrawlPreviewWidget> {
  ScrawlDrawController get drawController => this.widget.controller;
  ScrawlShouldDrawCallback _shouldDrawCallback;
  ScrawlShouldDrawCallback get shouldDrawCallback => _shouldDrawCallback;
  set shouldDrawCallback(ScrawlShouldDrawCallback shouldDrawCallback) {
    if (shouldDrawCallback == null) {
      drawController.shouldDrawCallbacks.remove(_shouldDrawCallback);
    } else {
      drawController.shouldDrawCallbacks.add(shouldDrawCallback);
    }
    _shouldDrawCallback = shouldDrawCallback;
  }

  @override
  void initState() {
    super.initState();
    setState(() {});
    this.shouldDrawCallback = () => setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    if (drawController.touchPoint == null) return Container();

    final previewRect = Rect.fromCenter(
      center: drawController.touchPoint,
      width: this.widget.preiviewSize,
      height: this.widget.preiviewSize,
    );

    Widget widget;

    // ignore: close_sinks
    final bloc = BlocProvider.of<EditScrawlBloc>(context);
    final imageRect = bloc.imageBounds;

    // widget = FutureBuilder(
    //   future: ImageUtil.loadImage(context, bloc.imageProvider),
    //   initialData: null,
    //   builder: (BuildContext context, AsyncSnapshot snapshot) {
    //     if (!snapshot.hasData) return Container();

    //     Widget widget = CustomPaint(
    //       painter: ScrawlPainter(
    //         (canvas, size) {
    //           // canvas.save();
    //           drawController.penHistoryForEach((pen, index) {
    //             pen?.draw(canvas);
    //           });
    //           // canvas.restore();
    //         },
    //         displayRect: previewRect,
    //         image: snapshot.data,
    //         imageRect: imageRect,
    //       ),
    //     );

    //     widget = buildBorder(widget);
    //     return widget;
    //   },
    // );

    widget = CustomPaint(
      painter: ScrawlPainter(
        (canvas, size) {
          drawController.penHistoryForEach((pen, index) {
            pen?.draw(canvas);
          });
        },
        displayRect: previewRect,
        imageRect: imageRect,
      ),
    );

    widget = Stack(
      children: <Widget>[
        Positioned(
          left: -previewRect.left,
          top: -previewRect.top,
          width: imageRect.width,
          height: imageRect.height,
          child: Image(
            image: bloc.imageProvider,
            width: imageRect.width,
            height: imageRect.height,
            fit: BoxFit.contain,
          ),
        ),
        Positioned.fill(
          child: widget,
        ),
      ],
    );

    widget = buildBorder(widget);

    return widget;
  }

  /// 构建外边框
  Widget buildBorder(Widget child) {
    final double radius = 14;
    final double outBorderWidth = 3;
    final double outRadius = radius + outBorderWidth;
    final Color outBorderColor = Color(0xFFFFFFFF);

    Widget widget = Stack(
      overflow: Overflow.visible,
      children: <Widget>[
        Positioned(
          top: -outBorderWidth,
          right: -outBorderWidth,
          bottom: -outBorderWidth,
          left: -outBorderWidth,
          child: DecoratedBox(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(outRadius),
              border: Border.all(
                color: outBorderColor,
                width: outBorderWidth,
              ),
            ),
          ),
        ),
        Positioned.fill(
          child: ClipRRect(
            borderRadius: BorderRadius.circular(radius),
            child: Container(
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(radius),
                color: Color(0xFFF5F5F7),
              ),
              width: this.widget.preiviewSize,
              height: this.widget.preiviewSize,
              child: child,
            ),
          ),
        ),
      ],
    );

    return widget;
  }
}
